<div class="pac-page-header">
  <div class="w-full flex justify-between items-end">
    <div class="flex flex-col">
      <div class="pac-page-title">{{ 'PAC.MENU.MANAGE_USERS' | translate: {Default: 'Manage Users'} }}</div>
      <div class="pac-page-subtitle">{{ 'PAC.MENU.ManageUsersAndInvites' | translate: {Default: 'Manage Users & Invites'} }}</div>
    </div>

    <div ngmButtonGroup>
      <button mat-raised-button displayDensity="cosy" color="accent" (click)="invite()">
        <div class="flex items-center">
          <mat-icon fontSet="material-icons-outlined">person_add</mat-icon>{{ 'PAC.ACTIONS.INVITE' | translate: {Default: "Invite"} }}
        </div>
      </button>

      <button mat-raised-button color="primary" displayDensity="cosy" (click)="addUser()">
        <mat-icon fontSet="material-icons-outlined">add</mat-icon>
        {{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }}
      </button>
    </div>
  </div>

  <nav mat-tab-nav-bar class="pac-tab-nav-bar self-stretch max-w-full overflow-hidden" color="accent" mat-align-tabs="start" mat-stretch-tabs="false" disableRipple displayDensity="cosy"
    [tabPanel]="tabPanel"
  >
    <span mat-tab-link [routerLink]="['.']"
      routerLinkActive #rla="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}"
      [active]="rla.isActive"
    >
      <mat-icon fontSet="material-icons-outlined" displayDensity="cosy" class="mr-1">account_circle</mat-icon>
      {{ 'PAC.MENU.USERS' | translate: {Default: "Users"} }}
    </span>
    @if (invitesAllowed()) {
      <span mat-tab-link [routerLink]="['invites']"
        routerLinkActive #rla2="routerLinkActive"
        [routerLinkActiveOptions]="{exact: true}"
        [active]="rla2.isActive"
      >
        <mat-icon fontSet="material-icons-outlined" displayDensity="cosy" class="mr-1">person_add</mat-icon>
        {{ 'PAC.ACTIONS.ManageInvites' | translate: {Default: "Manage Invites"} }}
      </span>
    }

  @for (link of openedLinks(); track link.id) {
    <span mat-tab-link [routerLink]="[link.id]"
        [active]="link.id === currentLink()?.id">
        <mat-icon class="mr-1" fontSet="material-icons-outlined" displayDensity="cosy">face</mat-icon>
        {{ userLabel(link) }}
        <button mat-icon-button class="pac-tab-close" displayDensity="compact" (click)="removeOpenedLink(link)">
            <mat-icon>cancel</mat-icon>
        </button>
    </span>
  }
  </nav>
</div>

<mat-divider></mat-divider>

<mat-tab-nav-panel #tabPanel class="pac-page-body"
  [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.path">
  <router-outlet #o="outlet"></router-outlet>
</mat-tab-nav-panel>
